<template>
    <div id="nursingConfig">
        <div id="addAndSearch">
            <div id="add">
                <el-button round type="primary" @click="addDialogVisible = true"
                >增加护理级别</el-button
                >
                <el-dialog
                        title="增加护理级别"
                        :visible.sync="addDialogVisible"
                        width="50%"
                        :before-close="handleClose"
                >
                    <div>
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="护理级别">
                                <el-input v-model="form.level"></el-input>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-input v-model="form.status"></el-input>
                            </el-form-item>
                            <el-form-item label="备注">
                                <el-input v-model="form.remarks"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false,resetForm()">取 消</el-button>
            <el-button
                    type="primary"
                    @click="
                addDialogVisible = false,
                onSubmit()"
            >立即创建</el-button
            >
          </span>
                </el-dialog>
            </div>
            <div id="search">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-input v-model="formInline.search"   @keyup.enter="onSearch()" placeholder="护理级别"></el-input>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch()">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div id="formDiv">
            <el-table
                    :data="NursingList"
                    border
                    highlight-current-row
                    style="width: 1235px"
            >
                <el-table-column fixed prop="id" label="级别编号" width="200">
                </el-table-column>
                <el-table-column fixed prop="level" label="护理级别" width="200">
                </el-table-column>
                <el-table-column fixed prop="status" label="状态" width="200">
                </el-table-column>
                <el-table-column fixed prop="remarks" label="备注" width="434">
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                @click="
                centerDialogVisible = true,
                editButton(scope.row)
              "
                                size="small"
                        >编辑</el-button
                        >
                        <el-button @click="delClick(scope.row)" type="text" size="small"
                        >禁用</el-button
                        >
                        <el-button @click="config(scope.row)" type="text" size="small"
                        >护理内容配置</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="editDialog">
            <el-dialog
                    title="修改护理级别属性"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center
            >
                <div>
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="护理级别">
                            <el-input v-model="form.level"></el-input>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-input v-model="form.status"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form.remarks"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false,resetForm()">取 消</el-button>
          <el-button
                  type="primary"
                  @click="
              centerDialogVisible = false,
              editClick()
            "
          >确 定</el-button
          >
        </span>
            </el-dialog>
        </div>
        <el-row style="float: right;margin: 0">
            <label>当前为第{{this.page.nowpage}}页，共计{{this.page.totalpage}}页</label>
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="primary" icon="el-icon-arrow-left" @click="decrease_page()">上一页</el-button>
                    <el-button type="primary" @click="increase_page()">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    <el-input type="primary" placeholder="请输入页码" style="max-width: 120px"
                              v-model="page.page_input"
                    ></el-input>
                    <el-button type="primary" @click="change_page()">Go!</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script>
    import qs from'qs';
    const axios = require("axios");
    export default {
        mounted() {
            this.getNursing("1");
        },
        methods: {
            config(row){
                this.form.id=row.id;
                this.$router.replace({path:'nursingconfig',query:{id:this.form.id,uname:this.$data.uname,power:this.$route.query.power}});
            },
            onSubmit() {
                console.log(this.form);
                if(this.form.level==""||this.form.remarks==""|| this.form.status=="")
                {
                    alert("请输入完整信息");
                }
                else
                {
                    this.addNursing();
                }

            },
            searchByLevel(search,page) {
                if(search=="")
                {
                    this.getNursing(1);
                    this.nowpage=1;
                }
                else
                {
                    axios({
                        method:'post',
                        url:'/api/nursingchoose_page/search_by_level',
                        data:qs.stringify({'page':page,'level':search}),
                    })
                        .then(
                            (res) => {
                                console.log(res);
                                this.NursingList = res.data.data.nursing_level_list;
                                this.page.totalpage=res.data.data.total_page;
                            },
                            (res) => {}
                        );
                }

            },
            delClick(row) {
                console.log(row);
                this.delNursing(row.id);
            },
            editButton(row) {
                this.form.level = row.level;
                this.form.status = row.status;
                this.form.remarks = row.remarks;
                this.form.id=row.id;
            },
            onSearch() {
                console.log(this.formInline.search);
                    this.searchByLevel(this.formInline.search,'1')
            },
            resetForm() {
                this.form.level = "";
                this.form.status = "";
                this.form.remarks = "";
                this.form.id = "";
            },
            handleClose(done) {
                this.$confirm("确认关闭？")
                    .then((_) => {
                        done();
                    })
                    .catch((_) => {});
            },
            handleCurrentChange(val) {
                /*console.log(val);*/
                this.getNursing(val);
                this.nowpage=val;
            },
            getNursing(page) {
                axios({
                    method:'post',
                    url:'/api/nursingchoose_page/getNursing',
                    data:qs.stringify({"page":page}),
                }).then(
                    (res) => {
                        console.log(res);
                        this.NursingList = res.data.data.nursing_level_list;
                        this.page.totalpage = res.data.data.total_page;
                    },
                    (res) => {}
                );
            },
            addNursing() {
                const form = this.$data.form;
                axios({
                    method:'post',
                    url:'/api/nursingchoose_page/addNursing',
                    data:qs.stringify(this.$data.form),
                })
                    .then(
                        (res) => {
                            console.log("addFinish");
                            this.getNursing(this.page.nowpage);
                            this.resetForm();
                        },
                        (res) => {}
                    );
            },
            delNursing(id) {
                axios({
                    method:'post',
                    url:'/api/nursingchoose_page/delNursing',
                    data:qs.stringify({'id':id}),
                })
                    .then(
                        (res) => {
                            console.log(res.data);
                            this.getNursing('1');
                            this.page.nowpage=1;
                        },
                        (res) => {}
                    );
            },
            editClick() {
                const form=this.$data.form;
                console.log(this.$data.form);
                axios({
                    method:'post',
                    url:'/api/nursingchoose_page/editNursing',
                    data:qs.stringify(this.$data.form),
                })
                    .then(
                        (res) => {
                            this.getNursing(this.page.nowpage);
                            this.resetForm();
                        },
                        (res) => {}
                    );
            },
            increase_page() {
                if(this.page.nowpage<this.page.totalpage) {
                    if(this.formInline.search=='') {
                        this.$data.page.nowpage++;
                        this.getNursing(this.page.nowpage);
                    }
                    else{
                        this.$data.page.nowpage++;
                        this.searchByLevel(this.formInline.search,this.page.nowpage);
                    }
                }
            },
            decrease_page() {
                if (this.$data.page.nowpage > 1) {
                    if(this.formInline.search=='') {
                        this.$data.page.nowpage--;
                        this.getNursing(this.$data.page.nowpage);
                    }
                    else{
                        this.$data.page.nowpage--;
                        this.searchByLevel(this.formInline.search,this.$data.page.nowpage);
                    }
                }
            },
            change_page() {
                alert(this.$data.page.page_input);
                let num = parseInt(this.$data.page.page_input);
                if (isNaN(num)) {
                    alert("请输入正确的数字！");
                    this.$data.page.page_input = '';
                } else if (num <= 0) {
                    alert("请输入正整数！");
                    this.$data.page.page_input = '';
                } else {
                    if(this.formInline.search=='') {
                        this.$data.page.nowpage = num;
                        this.getNursing(this.page.page_input);
                    }
                    else{
                        this.$data.page.nowpage = num;
                        this.searchByLevel(this.formInline.search,this.page.page_input);
                    }
                }
            },
        },

        data() {
            return {
                NursingList: [],
                page:
                    {
                        nowpage:1,
                        totalPage:'',
                        page_input:'' ,
                    },

                addDialogVisible: false, //add彈出框屬性
                centerDialogVisible: false, //
                formInline: {
                    search: "",
                },
                editId: "",
                form: {
                    id:'',
                    level:"",
                    status:"",
                    remarks: "",
                },
            };
        },
    };
</script>

<style>

    #nursingConfig {
        width: 100%;
        height: 100%;
    }

    #nursingConfig #addAndSearch {
        padding: 20px;
        width: 100%;
        height: 50px;
    }
    #nursingConfig #addAndSearch .el-input {
        width: 200px;
    }
    #nursingConfig #addAndSearch #add {
        float:left;
    }
    #nursingConfig #addAndSearch #search {
        float: right;
        margin-right: 60px;
    }
    #nursingConfig #addAndSearch #search .el-input {
        width: 120px;
    }
    #nursingConfig #page {
        bottom: 0;
        left:50%;
        position: absolute;
    }

    /*#nursingConfig #formDiv .el-table th,#nursingConfig #formDiv .el-table tr,#nursingConfig #formDiv .el-table__empty-block,#nursingConfig .el-table__row td*/
    /*{*/
    /*    border: 1px solid #CBCBCB;*/
    /*    background-color: #EEEEEE;*/
    /*}*/
</style>

